<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>调查问卷预览</title>
  <meta name="keywords" content=" " />
  <meta name="description" content="" />
  <link rel="stylesheet" href="https://zc.alltesting.cn/css/reset.css">
  <link rel="stylesheet" href="./css/common-style.css">
  <link rel="stylesheet" href="./css/preview.css">
  <!-- 1. 引入vue，需要引用在 ElementUI 之前-->
  <script src="./js/vue.js"></script>
  <!-- 2. 导入css -->
  <link href="./element-ui@2.15.8/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 3. 引入ElementUI组件 -->
  <script src="./element-ui@2.15.8/lib/index.js"></script>

</head>

<body>
  <!-- header 占位符 -->
  <div style="height: 70px;width:100%">
    <header style="position: fixed;top:0;left:0;right:0;background-color:#212832;height: 70px;z-index: 100;"></header>
  </div>
  <div id="preview">
    <!-- 工具栏 -->
    <div class="preview-bar-placeholder"></div>
    <div class="preview-bar">
      <div class="ASQ-container">
        <div class="preview-bar-content">
          <span class="left-tips"><span style="color:#FF4800">提示：</span>此为预览页面，不能参与作答</span>
          <ul class="preview-type-switch">
            <li v-for="(item,index) in ['手机预览','电脑预览']" @click="handleTypeSwitchClick(index)"
              :class="{active:index == currentTabIndex}">{{item}}</li>
          </ul>
          <a class="quit-preview">退出预览</a>
        </div>
      </div>
    </div>

    <!-- 问卷内容部分 -->
    <div class="questionnaire-content">
        <div class="questionnaire-list"  :class="currentTabIndex == 1?'pc-preview':'mobile-preview'">
          <el-form label-position="top" label-width="80px" :model="questionnaireData">
            <el-form-item :label="questionnaireData.title" class="questionnaire-title">
            </el-form-item>
            <el-form-item :label="questionnaireData.desc" class="questionnaire-desc">
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item :label="(index+1)+'、'+titleResult(item)" class="question-list"
              v-for="(item,index) in questionnaireData.questionData" :key="item.id">

              <!-- 单选题 -->
              <el-radio-group v-model="item.radio" v-if="item.type =='sc'" class="single-choice-question">
                <el-radio :label="choiceItem.label" v-for="(choiceItem,choiceIdx) in item.choice">{{choiceItem.title}}
                </el-radio>
                <el-radio :label="otherChoiceItem.label" v-for="(otherChoiceItem,otherChoiceIdx) in item.otherChoice">
                  {{otherChoiceItem.title}}
                <el-input v-model="otherChoiceItem.inputValue" placeholder="其他选项"></el-input>
                </el-radio>
              </el-radio-group>

              <!-- 多选题 -->
              <el-checkbox-group v-model="item.checkList" v-if="item.type =='mc'" class="multiple-choice-question">
                <el-checkbox :label="choiceItem.label" v-for="(choiceItem,choiceIdx) in item.choice" :key="choiceItem.label">{{choiceItem.title}}
                </el-checkbox>
                <el-checkbox :label="otherChoiceItem.label" v-for="(otherChoiceItem,otherChoiceIdx) in item.otherChoice">
                  {{otherChoiceItem.title}}
                  <el-input v-model="otherChoiceItem.inputValue" placeholder="其他选项"></el-input>
                </el-checkbox>
              </el-checkbox-group>

              <!-- 单项填空 -->
              <el-input type="textarea" v-model="item.inputValue" placeholder="请输入内容" :rows="1" autosize
                v-if="item.type =='si'"></el-input>

              <!-- 多项填空 -->
              <el-form label-position="top" label-width="80px" :model="item" v-if="item.type =='mi'"
                class="multiple-input-question">
                <el-form-item :label="choiceItem.title" v-for="(choiceItem,choiceIdx) in item.choice">
                  <el-input v-model="choiceItem.inputValue" type="textarea" :rows="1" autosize></el-input>
                </el-form-item>
              </el-form>

              <!-- 图片投票 -->

              <el-radio-group v-model="item.radio" v-if="item.type =='iu'" class="image-vote-question">
                <div class="image-vote-question-item" v-for="(iuItem,index) in item.choice">
                  <el-image
                  style="width: 100px; height: 100px"
                  :src="iuItem.url"
                  :preview-src-list="iuItem.srcList"></el-image>
                <el-radio :label="iuItem.radio" >{{iuItem.title}}</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
  </div>

  </div>


</body>
<script>
  var Main = {
    data() {
      return {
        num: -1,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
        ],
        currentTabIndex: 1,
        radio: "",
        checked1: "",
        questionnaireData: {}
      }
    },

    mounted(){
      let getLocalData = localStorage.getItem('questionnaireData');
      this.questionnaireData =  JSON.parse(getLocalData)
    },
    methods: {
      handleTypeSwitchClick(index) {
        this.currentTabIndex = index
      },
      handle(){
        console.log(123);
      }
    },
    computed: {
      titleResult() {
        return function (question) {
          return question.type === "mc" ? question.title + '【多选题】' : question.title
        }
      }
    }
  }

  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#preview')
</script>

</html>